<div id="wechatmenu_container">
	<div class="row">
		<div class="col-xs-12">
			<div id="search_box" class="widget-box  ui-sortable-handle collapsed">

				<div class="widget-body" style="display: none;">
					<div class="widget-main">
						<div class="row">
							<div style="padding-left: 10px">
								<div class="col-xs-12 col-sm-2 " style="float: right">
									<div id="wechatmenuSearchDiv" class="input-group"
										style="padding-bottom: 2px">

										<span class="input-group-btn">
											<button id="wechatmenuSearchBtn" type="button"
												class="btn btn-purple btn-sm">
												<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
												<span i18n="find"></span>
											</button>
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>


			<table id="wechatmenu_grid-table" class="e-tree-grid"></table>

			<div id="wechatmenu_grid-pager"></div>

		</div>
		<!-- /.col -->
	</div>
	<!-- /.row -->


	<div id="wechatmenuModalDiv" class="modal fade" tabindex="-1"
		data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header no-padding">
					<div class="table-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">
							<span class="white">&times;</span>
						</button>
						<span i18n="wechat.menu"></span>
					</div>
				</div>
				<div class="modal-body"
					style="max-height: 450px; overflow-y: scroll;">
					<div id="modal-tip" class="red clearfix"></div>
					<div>
						<div class="widget-body">
							<form id="wechatmenuForm" name="wechatmenuForm"
								class="form-horizontal  col-xs-12">
								<input type="hidden" name="id" id="id" /> <input type="hidden"
									name="parentId" id="parentId" />
								<div class="row" style="padding-bottom: 2px">
									<div class="form-group">
										<label class="col-sm-3 control-label" i18n="wechat.menu.name"></label>
										<div class="col-sm-9">
											<input type="text" class="form-control" id="name" name="name" />
										</div>
									</div>
								</div>
								<div class="row" style="padding-bottom: 2px">
									<div class="form-group">
										<label class="col-sm-3 control-label" i18n="wechat.menu.url"></label>
										<div class="col-sm-9">
											<textarea rows="8" cols="50" type="text" class="form-control" id="url" name="url"/>
											 
										</div>
									</div>
								</div>
								<div class="row" style="padding-bottom: 2px">
									<div class="form-group">
										<label class="col-sm-3 control-label"
											i18n="wechat.menu.lableKey"></label>
										<div class="col-sm-9">
											<input type="text" class="form-control" id="lableKey"
												name="lableKey" />
										</div>
									</div>
								</div>
								<div class="row" style="padding-bottom: 2px">
									<div class="form-group">
										<label class="col-sm-3 control-label"
											i18n="wechat.menu.sortNum"></label>
										<div class="col-sm-9">
											<input type="text" class="form-control spinner" id="sortNum"
												name="sortNum" />
										</div>
									</div>
								</div>

								<div class="row" style="padding-bottom: 2px">
									<div class="form-group">
										<label class="col-sm-3 control-label"
											i18n="wechat.menu.type"></label>
										<div class="col-sm-9">
											<select class="form-control" id="type"
												name="type" />
										</div>
									</div>
								</div>
							</form>

						</div>
					</div>
				</div>
				<div class="modal-footer no-margin-top">
					<div class="text-center">

						<button id="submitwechatmenuBtn" class="btn btn-sm btn-primary">
							<i class="ace-icon fa fa-floppy-o"></i> <span i18n="save"></span>
						</button>

						<button class="btn btn-sm" data-dismiss="modal">
							<i class="ace-icon fa fa-share "></i> <span i18n="cancel"></span>
						</button>
					</div>
				</div>
			</div>
			<!-- /.modal-content -->

		</div>
		<!-- /.modal-dialog -->
	</div>

</div>


<script type="text/javascript">
	var scripts = [ null, null ];
	var $container = $('#wechatmenu_container');
	var wechatmenuGrid = null;
	var $validatewechatmenuForm = null;
	$('.page-content-area')
			.ace_ajax(
					'loadScripts',
					scripts,
					function() {
						var grid_selector = "#wechatmenu_grid-table";
						var pager_selector = "#wechatmenu_grid-pager";

						var colNames;

						$.loy.dicts('', 'menuType', '', function() {
							var list = $.loy.dictList('menuType');
							var temp = [];
							if (list) {

								$('#type', $container).html('');
								temp.push('<option value=""></option>');
								for (var i = 0; i < list.length; i++) {
									var k = list[i].id;
									var l = list[i].name;
									temp.push('<option value="'+k+'">' + l
											+ '</option>');
								}
							}
							$('#type', $container).html(
									temp.join(' '));

						});

						$('.spinner', $container).ace_spinner({
							value : 0,
							min : 0,
							max : 1000000,
							step : 1,
							on_sides : true,
							icon_up : 'ace-icon fa fa-plus smaller-75',
							icon_down : 'ace-icon fa fa-minus smaller-75',
							btn_up_class : 'btn-success',
							btn_down_class : 'btn-danger'
						});

						$.loy
								.i18n(
										[ 'i18n/wechat/wechat_menu' ],
										$.homeGlobal.LANG,
										$container,
										{
											custCallback : function() {
												$('input, textarea', $container)
														.placeholder();
												colNames = [
														'',
														$.i18n
																.prop("wechat.menu.name"),
														$.i18n
																.prop("wechat.menu.url"),
														$.i18n
																.prop("wechat.menu.type"),
														$.i18n
																.prop("wechat.menu.lableKey"),
														$.i18n
																.prop("wechat.menu.sortNum"),
														'' ];
												$('#search_box', $container)
														.on(
																'shown.ace.widget',
																function(e) {
																	$(
																			'.chosen-container',
																			$(
																					'#search_box',
																					$container))
																			.each(
																					function() {
																						var $this = $(this);
																						$this
																								.css({
																									'width' : $this
																											.parent()
																											.width()
																								});
																					});
																	var searchConditionHeight = $(
																			'.widget-body',
																			$(
																					'#search_box',
																					$container))
																			.height();
																	wechatmenuGrid
																			.setGridHeight(getGridDefaultHeight()
																					- searchConditionHeight);
																});
												$('#search_box', $container)
														.on(
																'hide.ace.widget',
																function(e) {
																	var searchConditionHeight = $(
																			'.widget-body',
																			$(
																					'#search_box',
																					$container))
																			.height();
																	wechatmenuGrid
																			.setGridHeight(getGridDefaultHeight());
																});
												createwechatmenuGrid();
											}
										});

						$validatewechatmenuForm = $('#wechatmenuForm',
								$container).validate({
							onsubmit : false,
							rules : {
								name : {
									required : true
								}
							}
						});

						$('#submitwechatmenuBtn')
								.click(
										function() {
											if (!$validatewechatmenuForm
													.checkForm()) {
												$validatewechatmenuForm
														.defaultShowErrors();
												return;
											}
											var url = $(this).attr("url");
											$.loy
													.ajax({
														url : url,
														data : $(
																"#wechatmenuForm",
																$container)
																.serialize(),
														success : function(data) {
															var id = $(
																	'#id',
																	$(
																			"#wechatmenuForm",
																			$container))
																	.val();
															if (data.success) {
																$(
																		'#wechatmenuModalDiv',
																		$container)
																		.modal(
																				"hide");
																if (id
																		&& id != "") {
																	var rowData = wechatmenuGrid
																			.jqGrid(
																					'getRowData',
																					id);
																	rowData.id = id;
																	rowData.name = $(
																			'#name',
																			$container)
																			.val();
																	rowData.url = $(
																			'#url',
																			$container)
																			.val();
																	rowData.type = $(
																			'#type',
																			$container)
																			.val();
																	rowData.lableKey = $(
																			'#lableKey',
																			$container)
																			.val();
																	rowData.sortNum = $(
																			'#sortNum',
																			$container)
																			.val();
																	wechatmenuGrid
																			.jqGrid(
																					'setRowData',
																					id,
																					rowData);
																} else {//新增
																	var parentId = $(
																			'#parentId',
																			$container)
																			.val();
																	var parentRowData = wechatmenuGrid
																			.jqGrid(
																					'getRowData',
																					parentId);
																	var result = data.data;
																	var rowData = {};
																	rowData.url = result.url;
																	rowData.accessCode = result.accessCode;
																	rowData.lableKey = result.lableKey;
																	rowData.type = result.type;
																	rowData.name = result.name;
																	rowData.sortNum = result.sortNum;
																	rowData.parentId = parentId;
																	rowData.parent = parentId;
																	rowData.level = parentRowData.level + 1;
																	rowData.isLeaf = true;
																	rowData.expanded = false;
																	rowData.id = result.id;
																	wechatmenuGrid
																			.jqGrid(
																					"addChildNode",
																					result.id,
																					parentId,
																					rowData,
																					rowData);
																}
															}
														}
													});
										});
						function createwechatmenuGrid() {
							wechatmenuGrid = jQuery(grid_selector)
									.loyGrid(
											{
												url : 'wechat/menu/page',
												datatype : "json",
												mtype : 'GET',
												colNames : colNames,
												colModel : [
														{
															name : 'parentId',
															index : 'parentId',
															sortable : false,
															width : 100,
															align : "left",
															editable : true,
															hidden : true
														},
														{
															name : 'name',
															index : 'name',
															sortable : false,
															width : 90,
															align : "left",
															editable : true
														},
														{
															name : 'url',
															index : 'url',
															sortable : false,
															width : 140,
															align : "left",
															editable : true
														},
														{
															name : 'type',
															index : 'type',
															sortable : false,
															width : 60,
															align : "left",
															editable : true
														},
														{
															name : 'lableKey',
															index : 'lableKey',
															sortable : false,
															width : 100,
															align : "left",
															editable : true
														},
														{
															name : 'sortNum',
															index : 'sortNum',
															sortable : false,
															width : 40,
															align : "left",
															editable : true
														},
														{
															name : '',
															index : '',
															width : 120,
															fixed : true,
															sortable : false,
															resize : false,
															formatter : function(
																	cellvalue,
																	options,
																	rowObject) {
																var button = '';

																button = '<div title="'
																		+ $.jgrid.nav.edittitle
																		+ '" onclick=wechatmenuEdit("'
																		+ rowObject.id
																		+ '");  style="float:left;margin-left:5px;" class="ui-pg-div ui-inline-del"  onmouseover="jQuery(this).addClass(\'ui-state-hover\');" onmouseout="jQuery(this).removeClass(\'ui-state-hover\');"  data-original-title="所选记录"><span class="ui-icon ui-icon-pencil"></span></div>';

																var del = '<div title="'
																		+ $.jgrid.nav.deltitle
																		+ '" onclick=wechatmenuDel("'
																		+ rowObject.id
																		+ '");  style="float:left;margin-left:5px;" class="ui-pg-div ui-inline-del"  onmouseover="jQuery(this).addClass(\'ui-state-hover\');" onmouseout="jQuery(this).removeClass(\'ui-state-hover\');"  data-original-title="所选记录"><span class="ui-icon ace-icon ace-icon fa fa-trash-o red"></span></div>';
																button = button
																		+ del;

																var add = '<div title="'
																		+ $.jgrid.nav.addtitle
																		+ '" onclick=wechatmenuAdd("'
																		+ rowObject.id
																		+ '");   style="float:left;margin-left:5px;" class="ui-pg-div ui-inline-del"  onmouseover="jQuery(this).addClass(\'ui-state-hover\');" onmouseout="jQuery(this).removeClass(\'ui-state-hover\');"  data-original-title="所选记录"><span class="ui-icon ace-icon fa fa-plus-circle purple"></span></div>';
																button = button
																		+ add;

																return button;
															}
														} ],
												page : true,
												pager : pager_selector,
												treeGrid : true,
												
	gridview : true,
												ExpandColumn : "name",
												rownumbers : false,
												ExpandColClick : true,
												treeGridModel : "adjacency",
												width : $(".page-content")
														.width(),
												height : '410',
												loadComplete : function(data) {
													loadComplete(data);
												}
											})
									.loyGrid(
											'navGrid',
											'#wechatmenu_grid-pager',
											{
												"baseUrl" : "wechat/menu/",
												removeCols : [ 0, 7, 8, 9, 10,
														11, 12, 13 ],
												accessCodePrefix : 'wechatmenu',
												"addfunc" : function() {
													wechatmenuAdd('');
												},
												view : false,
												add : true,
												edit : false,
												del : false,

											})
									.loyGrid(
											'navButtonAdd',
											"#wechatmenu_grid-pager",
											{
												caption : "",
												title : "同步到微信",
												buttonicon : "ace-icon fa fa-history red",
												onClickButton : function() {
													syncWeChat();
												},
												position : "last"
											});

							wechatmenuGrid.jqGrid('setFrozenColumns');
						}

					});

	function syncWeChat() {

		$.loy.ajax({
			url : 'wechat/menu/create',
			shade : false,
			success : function(data) {

			}
		});

	}

	function clearwechatmenuForm() {
		$validatewechatmenuForm.resetForm();
		$('#id', $container).val('');
		$('#name', $container).val('');
		$('#url', $container).val('');
		$('#type', $container).val('');
		$('#lableKey', $container).val('');
		$('#sortNum', $container).val('');
		$('#parentId', $container).val('');
	}

	function wechatmenuEdit(id) {
		clearwechatmenuForm();
		$('#submitwechatmenuBtn', $container).attr("url", "wechat/menu/update");
		$('#wechatmenuModalDiv', $container).modal("show");
		$.loy.ajax({
			url : 'wechat/menu/get',
			shade : false,
			data : {
				id : id
			},
			success : function(data) {
				var result = data.data;
				$('#id', $container).val(result.id ? result.id : '');
				$('#name', $container).val(result.name ? result.name : '');
				$('#url', $container).val(result.url ? result.url : '');
				$('#type', $container).val(result.type);
				$('#lableKey', $container).val(
						result.lableKey ? result.lableKey : '');
				$('#sortNum', $container).val(
						result.sortNum ? result.sortNum : '');
				$('#parentId', $container).val(
						result.parentId ? result.parentId : '');
			}
		});
	}
	function wechatmenuAdd(parentId) {
		clearwechatmenuForm();
		$('#parentId', $container).val(parentId);
		$('#submitwechatmenuBtn', $container).attr("url", "wechat/menu/save");
		$('#wechatmenuModalDiv', $container).modal("show");

	}
	function wechatmenuDel(id) {

		$.loy.confirm($.i18n.prop('confirm_info_del'), function() {
			$.loy.ajax({
				url : 'wechat/menu/del',
				data : {
					id : id
				},
				success : function(data) {
					wechatmenuGrid.jqGrid("delTreeNode", id);
				}
			});
		});
	}
</script>